<template>
  <div :class="ns.e('header')">
    <table :class="ns.e('table')" :style="`width: ${scrollX}px`">
      <thead :class="ns.e('thead')">
        <tr :class="ns.e('tr')">
          <template v-for="(col, index) in columns">
            <th
              :class="{
                [ns.e('th')]: true,
                [getColumnClassName(col, index)]: true,
                [ns.e(`th-fix-${col.fixed}`)]: col.fixed,
                [ns.e('td-fix-right-first')]: col === rightFixedColumsRef[0],
                [ns.e('td-fix-left-last')]: col === leftFixedColumsRef[leftFixedColumsRef.length - 1],
                [ns.em('th-align', col.align)]: col.align
              }"
              :style="{
                width: col.width + 'px',
                left: fixedColumnLeftMapRef[col.key] + 'px',
                right: fixedColumnRightMapRef[col.key] + 'px'
              }"
            >
              <Render :render="col.title" :data="col" />
            </th>
          </template>
        </tr>
      </thead>
    </table>
  </div>
</template>

<script setup lang="ts">
import { inject, toRefs } from 'vue'
import useNamespace from '../_util/hooks/useNameSpace'

import { TableColumn, dataTableContextKey } from './interface'
import { getColumnClassName } from './utils'

import Render from '../render'

const { props, leftFixedColumsRef, rightFixedColumsRef, fixedColumnLeftMapRef, fixedColumnRightMapRef } = inject(dataTableContextKey)
const { prefixCls, columns, scrollX } = toRefs(props)

const ns = useNamespace(prefixCls.value)
</script>
